<template>
  <view class="user-uservisit-page">
    <view class="user-box">
      <view class="user-box-item st-flex" v-for="(item,index) in dataList" :key="index" @tap="itemClick(item)">
        <u-avatar @tap="avatarClick(item)" :src="item.visitAvatar"></u-avatar>
        <text>{{item.visitNickname}}</text>
      </view>
    </view>

    <stULoadmore ref="loadMore" :ready="loadData" @loadmore="loadData"></stULoadmore>
  </view>
</template>

<script>

import stULoadmore from '../../../../../../../components/common/web/components/app/uni-app/uview/st-u-loadmore/st-u-loadmore.vue'
export default {
  components: {stULoadmore},

  data(){
    return {
      // 数据
      dataList: [],
      // 查询参数
      query: {
        current: 1
      }
    }
  },
  onReachBottom(){
    this.loadData()
  },
  methods: {
    // 跳转到用户详情
    navigateToUserDetail(userId){
      uni.navigateTo({
        url: '/pages/index/userDetail?userId=' + userId
      })
    },
    itemClick(item){
      this.navigateToUserDetail(item.visitUserId)

    },
    avatarClick(item){
      this.navigateToUserDetail(item.visitUserId)
    },
    // 加载数据
    loadData(refresh,callback=()=>{}) {
      if(!refresh && this.$refs.loadMore && !this.$refs.loadMore.canLoad()){
        if(callback){
          callback()
        }
        return
      }
      this.$http.get('/user-visit/me-visit/getPage',{params:this.query}).then(res => {
        if (this.query.current == 1) {
          this.dataList = []
        }
        res.data.records.forEach(item =>{
          this.dataList.push(item)
        });
        this.query.current = res.data.current + 1
        this.$refs.loadMore.loaded(res.data)
      }).catch((error)=>{
        if (error.statusCode == '404') {

          this.$refs.loadMore.setMoreStatus('nomore')
        }else {
          this.$u.toast('抱歉系统出错误了')
          console.error(error)
          this.$refs.loadMore.loadError()
        }
      }).finally(()=>{
        if(callback){
          callback()
        }
      })
    },
    // 刷新数据
    refreshStarData(callback=()=>{}){
      this.query.current = 1
      this.loadData(true,callback)
    }
  }
}
</script>

<style lang="scss" scoped>
.user-uservisit-page{
  .user-box .user-box-item{
    border-bottom: solid 2rpx $u-border-color;
    padding: 20rpx;
  }
}
</style>